<!-- 我的页面 -->
<!-- 小鸽子  20/8/21-->
<!-- 小鸽子  20/8/23  增加跳转链接-->
<!-- 小鸽子  20/8/26  调用接口 -->
<!-- 小鸽子 8/28 补充跳转接口 -->
<!-- 9/1 增加跳转时页面所带参数 -->

<!-- 小瓜子 2020/09/11 添加加载和页面请求错误显示的组件 -->
<template>
	<view>
		<view class="loading" v-if="isLoading" style="width: 100%;background-color: #F76B8A;" :style="getHeight">
			<text :style="'display: block; width: 100%; height: 100%; line-height: ' + loadingHeight + 'px; text-align: center; color:#FFF'">加载中...</text>
		</view>
		<ErrorPage v-if='err' style='background-color: #F76B8A; color: #fff;' @reloadPage='reloadPage'></ErrorPage>
		<view class="mine" :style="getHeight" v-if="!isLoading && !err">
			<view class="mineTop">
				 <view class="mineDataTop">
					 <!-- 个人资料小部分 -->
					<view class="mineData">
						<view class="dataPhoto">
							<image :src="loginInformation.avatarUrl" @tap="previewImg(loginInformation.avatarUrl)" mode="aspectFill"></image>
						</view>
						<view class="dataBox">
							<!-- 名+专业 -->
							<view class="dataBoxTop" @tap="goInformation">
								<text class="topName">{{loginInformation.nickname}}</text>
								<!-- 建议去掉专业 -->
								<!-- <view class="BoxTopright">
									<text class="topMajor">{{loginInformation.major}}</text>
									<text class="topSex">{{loginInformation.grade}}</text>
								</view>	 -->
							</view>
							
							<!-- 等级+硬币-->
							<view class="dataBoxMiddle">
										<!-- <text class="signCoin"> -->
										{{"签到硬币"}}&nbsp;:&nbsp;{{loginInformation.signCoinsNum}}
										<!-- </text> -->
										<text style="width: 15rpx;"></text>
										<!-- <text class="rewardCoin"> -->
										{{"打赏硬币"}}&nbsp;:&nbsp;{{loginInformation.exchangeCoinsNum}}
										<!-- </text> -->
							</view>
							<view class="dataBoxBottom">
								<text>{{loginInformation.description}}</text>
							</view>
						
					<!-- 进度条 -->
					<view class="mineProgress">
						<view class="progressTop">
							<text>Lv{{loginInformation.level}}</text>
							<text>{{loginInformation.experience}}/{{loginInformation.needExperience}}</text>
							<text>Lv{{loginInformation.level+1}}</text>
						</view>
						<view class="progressBottom">
							<view class="bottomLine">
								<view class="topLine" :style="{width:width+'%'}">	
								</view>
							</view>
						</view>
					</view>
					</view>
					</view>
				</view> 
				<!-- 小菜单 -->
				<view class="mineDataBottom">
					<view class="bottomItem" @tap='goLive'>
						<text class="itemNum">{{loginInformation.newsNum}}\n</text>
						<text class="itemText">动态</text>
					</view>
					<view class="bottomItem" @tap='goFans'>
						<text class="itemNum">{{loginInformation.fansNum}}\n</text>
						<text class="itemText">粉丝</text>
					</view>
					<view class="bottomItem" @tap='goFollow'>
						<text class="itemNum">{{loginInformation.followNum}}\n</text>
						<text class="itemText">关注</text>
					</view>
					<view class="bottomItem  unLine" @tap='goCollection'>
						<text class="itemNum">{{loginInformation.favoriteNum}}\n</text>
						<text class="itemText">收藏</text>
					</view>
				</view>
			</view>
			<!-- 跳转菜单选项 -->
			<!-- cartBgImageUrl -->
			<!-- <image :src="loginInformation.backUrl" mode="aspectFill"></image> -->
			<!-- <image class="backphoto" src="../../static/test.jpg" mode="aspectFill"></image> -->
			<view class="mineBottom">
				
				<view class="bottomItem" @tap="goTheme">
					<text class="inxupt inxupttubiao38"></text>
					<text class="itemName">个性主题</text>
					<text class="inxupt inxupttubiao20 arrow"></text>
				</view>
				<view class="bottomItem" @tap="goAccountSetting">
					<text class="inxupt inxupttubiao39"></text>
					<text class="itemName">账号设置</text>
					<text class="inxupt inxupttubiao20 arrow"></text>
					
				</view>
				<view class="bottomItem" @tap="goInformation">
					<text class="inxupt inxupttubiao40"></text>
					<text class="itemName">个人资料</text>
					<text class="inxupt inxupttubiao20 arrow"></text>
				</view>
				<view class="bottomItem" @tap="gobadBehavior">
					<text class="inxupt inxupttubiao41"></text>
					<text class="itemName">不良记录</text>
					<text class="inxupt inxupttubiao20 arrow"></text>
				</view>
				<view class="bottomItem" @tap="goProduct">
					<text class="inxupt inxupttubiao42"></text>
					<text class="itemName">产品介绍</text>
					<text class="inxupt inxupttubiao20 arrow"></text>
				</view>
				<view class="bottomItem" @tap="goFeedBack">
					<text class="inxupt inxupttubiao43"></text>
					<text class="itemName">意见反馈</text>
					<text class="inxupt inxupttubiao20 arrow"></text>
				</view>
				<view class="bottomCopy">
					<view class="copyLeft">
						<text>产品改变生活\n代码编制未来</text>
						<!-- <text>代码编制未来</text> -->
					</view>
					<view class="copyRight">
						<text>技术支持@AllSpark工作室\n</text>
						<text>allsparkstduio.com</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {_ajax} from '../../in-xupt-functions.js'
	import ErrorPage from "../../components/ErrorPage.vue"
	export default {
		components: {
			ErrorPage
		},
		data() {
			return {
				  getHeight:"",
				  isLoading: true,
				  err: false,
				  loginInformation:{ 
					  uname:"",		//名字
					  sex:'',		//性别
					  grade:'',     //年级
					  major:'', //专业
					  headUrl:'',  //头像地址
					  backUrl:'',  //背景图片地址
					  level:0,     //等级
					  signCoinsNum:0,  //硬币数
					  exchangeCoinsNum:0,  //打赏硬币
					  sign:'',  //个性签名
					  experience:0,  //经验
					  needExperience:0,  //升级需要的经验值
					  fansNum:0,  //粉丝量
					  followNum:0,  //关注量
					  newsNum:0,    //动态量
					  collectNum:0//收藏量
					  
				  }
			}
		},
		onLoad() {
			const that = this
			uni.getSystemInfo({
				success(res) { 
					that.getHeight = 'height:' + res.windowHeight + 'px'
					that.loadingHeight = res.windowHeight - 50
				}
			})	
		},
		methods: {
			reloadPage: function () {
				this.err = false;
				this.isLoading = true;
				this.initData()
			},
			previewImg: function(logourl){
				var that=this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					current:0,
					urls:imgsArray
				})
			},
			getNum: function(){
				this.width = ((this.loginInformation.experience/this.loginInformation.needExperience)*100).toFixed(0)
			},
			goTheme: function(){
				uni.showToast({
					icon:'none',
					title:'程序员小姐姐正在加紧开发中(≧▽≦)'
				})
			},
			goAccountSetting: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../AccountSetting/AccountSetting'
				})
			},
			goInformation: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../MyInformation/MyInformation'
				})
			},
			gobadBehavior: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../BadBehavior/BadBehavior'
				})
			},
			goProduct: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../Product/Product'
				})
			},
			goFeedBack: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../FeedBack/FeedBack'
				})
			},
			goLive: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../Live/Live'
				})
			},
			goFans: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../FansAndFollow/FansAndFollow?isFans=1'
				})
			},
			goFollow: function(){
				uni.navigateTo({	
					animationType:'slide-in-right',
					url:'../FansAndFollow/FansAndFollow?isFans=0'
				})
			},
			goCollection: function(){
				uni.navigateTo({
					animationType:'slide-in-right',
					url:'../Collections/Collections'
				})
			},
			initData:function(){
				// uni.showLoading({
				// 	title: '正在加载',
				// 	mask: true
				// })
				var that =this;
				_ajax({
					url:'/user/page',
					method:'GET'
				}).then(res=>{
					that.loginInformation=res.data.data;
					if (res.data.data.gender==0){
						that.loginInformation.gender='保密'
					}else if (res.data.data.gender==1) {
						that.loginInformation.gender='男'
					}else if (res.data.data.gender==2) {
						that.loginInformation.gender='女'
					}
					if (res.data.status == 0){
						this.getNum()
						this.isLoading = false;
						uni.hideLoading()
						this.err = false
					}else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.err = true
					}
				})
				.catch(err => {
					this.isLoading = false
					this.err = true
				})
			}
		},
		onShow(){
			const that = this
			uni.getSystemInfo({
				success(res) { 
					that.getHeight = 'height:' + res.windowHeight + 'px'
				}
			})
			this.initData()
		}
	}
		
</script>

<style lang="less">
	.mine{
		word-spacing: 1rpx;
		width: 100%;
		background-color: @g-pink;
		.mineTop{
			width: 100%;
			height: 32%;
		
		}
		.mineDataTop{
			width: 94%;
			height: 70%;
			margin: 0 auto;
			.mineData{
				width: 100%;
				height: 100%;
				display: flex;
				// background-color: #F0AD4E;
				justify-content: space-between;
				align-items: center;
				.dataPhoto{
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					background-color: #ffffff;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.dataBox{
					width: 70%;
					height: 90%;
					color: #ffffff;
					.dataBoxTop{
							width: 100%;
							height: 72rpx;
							display: flex;
							line-height:82rpx;
							margin-top: 10rpx;
							.topName{
								width: 100%;
								font-size: 20px;			
								font-weight: 800;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								margin-top: -10rpx;
								
							}
							.BoxTopright{
								font-size: 14px;
								font-weight: lighter;
								margin-left: 8rpx;
								margin-top: -4rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 214rpx;
							}
							
					}
					.dataBoxMiddle{
						// width: 82%;
						width: 640rpx;
						height: 52rpx;
						display: flex;
						font-size: 12px;
						font-weight: 300;
						margin-left: 2rpx;
						.signCoin{
							// width: 50%;
							width: 320rpx;
						}
						.rewardCoin{
							// width: 50%;
							width: 320rpx;
						}
					}
					.dataBoxBottom{
						width: 512rpx;
						height: 40rpx;
						font-size: 12px;
						margin-left: 2rpx;
						margin-bottom:12rpx;
						overflow: hidden;
						font-weight: 300;
					}
				}
			}
			.mineProgress{
				width: 60%;
				height: 70rpx;
				margin-left: 2px;
				.progressTop{
					width: 100%;
					height: 40rpx;
					color: #ffffff;
					font-weight: 200;
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.progressBottom{
					margin-top: 5rpx;
					.bottomLine{
						width: 300rpx;
						height: 10rpx;
						background-color: #fff;
						.topLine{
							background-color: #bab8b1;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.mineDataBottom{
			margin-top: 16rpx;
			width: 86%;
			height: 27%;
			color: #fff;
			margin: 10rpx auto;
			display: grid;
			grid-template-columns:repeat(4,25%);
			grid-template-rows: 100%;
			.bottomItem{
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 55rpx;
				margin-top: 18rpx;
				border-right: 1rpx solid #f2f2f2;
				font-size: 14px;
				.itemNum{
					font-size: 20px;
					width: 80rpx;
					padding-bottom: 2rpx;
				}
				.itemText{
					font-size: 12px;
					font-weight: 500;
				}
			}
			.unLine{
					border: none;
			}
		}
		.backphoto{
			width: 100%;
			height: 66.5%;
			z-index: 0;
			background-color: #ffaaff;
			border-top-right-radius: 18rpx;
			border-top-left-radius: 18rpx;
			z-index: 99;
			}
		.mineBottom{
			background-color:rgba(255,255,255,0.79);
			width: 100%;
			height: 68%;
			margin-top: -10rpx;
			border-top-right-radius: 18rpx;
			border-top-left-radius: 18rpx;
			z-index: 999;
			position: absolute;
			bottom: 0;
			left: 0;
			.bottomItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 90%;
				height: 74rpx;
				margin: 0 auto;
				margin-bottom: 15rpx;
				text-align: left;
				padding-top: 10rpx;
				border-bottom: 2rpx solid #e2e2e2;
				z-index: 999;
				// .inxupttubiao40{
				// 	font-size: 14px;
				// }
				.itemName{
					height:16px;
					flex: 9;
					line-height: 14px;
					padding-left: 10rpx;
				}
				.inxupttubiao20{
					font-size: 16px;
				}
			}
			.bottomCopy{
				color: #7f7f7f;
				width: 100%;
				height: 8%;
				position: absolute;
				bottom: 4rpx;
				display: flex;
				.copyLeft{
					font-size: 28rpx;
					display: inline-block;
					width: 40%;
					height: 68rpx;
					text-align: right;
					line-height: 35rpx;
					border-right: 1px solid #7f7f7f;
					padding-right: 5px;
				}
				.copyRight{
					width: 60%;
					font-size: 28rpx;
					height: 70rpx;
					// padding-left: 12rpx;
					line-height: 35rpx;
					padding-left: 5px;
				}
			}
		}
	}
	
</style>
